{extend name="Administrator/nav"}
{block name="title"}年级管理{/block}
{block name="content"}
<div class="row">
    <div class="col-md-12">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <form class="form-inline" action="{:url()}">
                        <div class="form-group">
                            <label class="sr-only" for="name">年级管理</label>

                            <input name="name" type="text" class="form-control" placeholder="请输入要搜索的关键字..." value="{:input('get.name')}">
                        </div>
                        <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i>&nbsp;查询</button>
                    </form>
                </div>
                <div class="col-md-4 text-right">
                    <button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data"><i
                            class="glyphicon glyphicon-plus"></i>&nbsp;增加</button>

                    <div class="modal bs-example-modal-lg" id="mymodal-data" tabindex="-1" role="dialog"
                         aria-labelledby="mySmallModalLabel" aria-hidden="true">
                        <div class="modal-dialog  modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                                            class="sr-only">Close</span></button>
                                    <h4 class="modal-title text-left">增加年级</h4>
                                </div>
                                <div class="modal-body text-left">
                                    <form action="{:url('insert')}" method="post" class="form-inline">            
                                        <div class="modal-body">
                                            <label>学院：</label>
                                            <select id="college" class="form-control" onclick="getMajor()">
                                                {volist name="colleges" id = "College"}
                                                <option value="{$College->id}">{$College->name}</option>
                                                {/volist}
                                            </select>
                                            <label>专业：</label>
                                            <select id="major" class="form-control" onclick="getGrade()">
                                                <option>
                                                </option>
                                            </select>
                                            <label>年级名称：</label>
                                            <input type="text" name="name" class="from-group">
                                                <button type="submit" class="btn btn-primary">保存</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
            <hr/>
            <table class="table table-hover table-bordered">
                <tr class="info">
                    <th width="10%">ID</th>
                    <th width="35%">年级名称</th>
                    <th width="35%">专业名称</th>
                    <th width="20%">操作</th>
                </tr>
                {volist name="grades" id="Grade" key="key"}
                <tr>
                    <td>{$key}</td>
                    <td>{$Grade->getData('name')}</td>
                    <td>{$Grade->major->name}</td>
                    <td>
                        <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editGrade{$key}"><i class="glyphicon glyphicon-pencil"></i>&nbsp;编辑</button>
                        <a class="btn btn-sm btn-danger" href="{:url('delete?id=' . $Grade->getData('id'))}"><i class="glyphicon glyphicon-trash"></i>&nbsp删除</a>

                        <div class="modal" id="editGrade{$key}" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button>
                                        <h4 class="modal-title">编辑年级</h4>
                                    </div>

                                    <div class="modal-body">
                                        <form action="{:url('update')}" method="post" class="form-inline">
                                            <label>年级名称：</label>
                                            <input type="hidden" name="id" value="{$Grade->getData('id')}"/>
                                            <input type="text" name="name" id="name" value="{$Grade->getData('name')}"/>
                                            <label>专业名称：</label>
                                            <select  class="form-control" name="major_id" id="major" >
                                                {volist name="majors" id="_major"}
                                                <option value="{$_major->getData('id')}" {eq name="_major->getData('id')" value="$Grade->getData('major_id')"} selected="selected" {/eq}>{$_major->getData('name')}</option>
                                                {/volist}
                                            </select>
                                            <button type="submit" class="btn btn-primary">保存</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                {/volist}
            </table>
            {:$grades->render()}
        </div>
    </div>
</div>

<script>
    //onchang的方法完成级联表单操作
    function getMajor() {
        var collegeNode = document.getElementById('college');
        var majorNode = document.getElementById('major');
        var name = "aCollege";//建立的input的name

        clear(majorNode);

        var collegeIndex = collegeNode.selectedIndex;
        var value = collegeNode[collegeIndex].value;
        var url = "/labmanagesystem/public/index/grade/getMajor?college=" + value;
        ajaxGet(url, function (response) {
            var majors = response;
            createOption(majorNode, majors);
            setSelected(majorNode);
            getGrade();
        });
        createInput(value, name, collegeNode);
    }

    function getGrade() {

        var majorNode = document.getElementById('major');
        var name = "aMajor";//建立的input的name
        var majorIndex = majorNode.selectedIndex;
        var value = majorNode[majorIndex].value;

        createInput(value,name,majorNode);
    }

    //访问php函数，一个对象数组的返回值
    function ajaxGet(url, callback) {
        $.ajax({
            url: url,
            type: "get",
            success: function (response) {
                callback(response);
            },
            error: function (xhr) {
                console.log('server error');
            }
        });
    }

    //清除
    function clear(node) {
        node.length = 0;
    }

    //创建选项
    function createOption(node, inners, values) {
        for (var i = 0; i < inners.length; i++) {
            var option = document.createElement('option');

            option.value = inners[i].id;
            option.name = node;
            option.innerHTML = inners[i].name;
            node.appendChild(option);
        }
    }

    //设置选中状态
    function setSelected(node) {
        node.options[0].setAttribute("selected", "true");

    }

    //创建一个input按钮
    function createInput(value, name, position) {
        var newInput = document.createElement("input");
        newInput.name = name;
        newInput.value = value;
        position.appendChild(newInput);
    }

    getMajor();
</script>
{/block}